<template>
  <!-- 登录/注册组件 -->
  <div class="login-bg">
    <div class="login">
      <div class="eleme-login-title">
        <h1>MapleStory后台管理系统</h1>
      </div>
      <div class="eleme-login-box">
        <!-- 定义了一个rules 属性 -->
        <!-- 添加表单的ref -->
        <el-form :model="formData" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input
              v-model="formData.username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="formData.password"
              placeholder="密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 登录点击事件 -->
            <el-button type="primary" class="comfirm_btn" @click="handleSubmit"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
        <div class="eleme-login-tip">
          <p class="tip">温馨提示</p>
          <p class="tip">未登录过的新用户，自动注册</p>
          <p class="tip">注册过的用户可凭账号密码登录</p>
        </div>
        <div class="eleme-login-bottom">
          <span>忘记密码 </span>|
          <router-link to="/register">立即注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    // 这里存放数据
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {
            message: '账号输入不能为空',
            trigger: 'blur',
            required: true
          }
        ],
        password: [
          {
            // message: '密码输入不能为空',
            trigger: 'blur',
            // required: true,
            validator: function (rule, value, callback) {
              var panduan = /^[a-zA-Z0-9_.@~!?]{5,12}$/;
              if (!panduan.test(value)) {
                callback(new Error('用户的密码格式不对'));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSubmit: function () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // loginService(this.formData.username, this.formData.password).then(
          //   res => {
          //     console.log(res);
          //   }
          // );
          // 打开加载层
          var loading = this.$loading.service(this.$store.state.loadingConfig);
          this.$axios
            .post('/login', {
              username: this.formData.username,
              password: this.formData.password
            })
            .then(res => {
              if (res.status === 0) {
                localStorage.setItem('token', res.token);
                this.$message.success(res.msg);
                this.$router.push('/welcome'); //  跳转到welcome页面
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(error => {
              // 请求失败
              this.$message.error(error);
            })
            .finally(() => {
              // 关闭加载层
              this.$nextTick(() => {
                loading.close();
              });
            });
        } else {
          this.$message.error('输入内容格式有问题！');
        }
      });
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.login-bg {
  // overflow: hidden;
  // padding-top: 100px;
  background: url('../../assets/images/bg.jpg') no-repeat;
  background-size: 100% 100%;
  background-color: #2b4b6b;
}
.login {
  position: relative;
  height: 100vh;
  width: 100%;

  // background-size: 100% 100%;

  // padding-top: 100px;
  // margin-top: 100px;
  .eleme-login-title {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    h1 {
      color: white;
      font-weight: 400;
    }
  }

  .eleme-login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #fff;
    height: 300px;
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    margin-top: 20px;
    .comfirm_btn {
      width: 100%;
    }
  }
  .eleme-login-tip {
    margin: 0 auto;
    text-align: center;
    .tip {
      color: red;
    }
  }
  .eleme-login-bottom {
    margin-top: 20px;
    text-align: center;
    a {
      text-decoration: none;
    }
  }
}
</style>
